<template>
  <div class="flex flex-col items-center justify-center w-screen h-screen items-cecenter">
    <h1 class="text-2xl font-bold">
      <router-link to="/">{{ $t('title') }}</router-link>
    </h1>
    <div>在渲染进程中使用 Electron 相关 API</div>
    <div>@vueuse/electron</div>
    <div class="flex gap-2">
      <el-button type="primary" @click="openFile">打开文件窗口</el-button>
    </div>
    <div>vite-plugin-electron-renderer</div>
    <el-button type="primary" @click="openFile2">打开文件窗口2</el-button>
    <div>remote模块</div>
    <el-button type="primary" @click="openFile3">打开文件窗口3</el-button>
    <div v-if="filePath">选择的文件路径：{{ filePath }}</div>
  </div>
</template>

<script setup lang="ts">
  import { useIpcRenderer } from '@vueuse/electron'
  import { ipcRenderer } from 'electron'
  import { dialog } from '@electron/remote'
  import { CustomEnum, DialogEnum } from '../enums/channelEnum'

  const ipcRender = useIpcRenderer()
  const filePath = ref('')

  const openFile = () => {
    ipcRender.send(CustomEnum.OPEN)
    ipcRender.on(CustomEnum.REPLY, (_event, args) => {
      if (!args) return
      filePath.value = args[0]
    })
  }

  const openFile2 = async () => {
    const res = await ipcRenderer.invoke(DialogEnum.OPEN_FILE)
    console.log('打开的文件地址：', res)
    filePath.value = res[0]
  }

  const openFile3 = () => {
    const res = dialog.showOpenDialogSync({})
    console.log('打开的文件地址：', res)
    filePath.value = res![0]
  }
</script>

<style scoped></style>
